<template>
  <div>
    <h1>权益列表</h1>
    <input type="button" value="增加" @click="Add" class="btn btn-primary" />
    <hr />
    <div>
      权益名称: <input type="text" v-model="Qdata.name" /> 开始时间:
      <input type="date" v-model="Qdata.CTime" /> 结束时间:
      <input type="date" v-model="Qdata.ETime" />
      <input
        type="button"
        value="查询"
        @click="GetRightList"
        class="btn btn-primary"
      />
    </div>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>权益编号</td>
          <td>权益名称</td>
          <td>权益创建时间</td>
          <td>权益修改时间</td>
          <td>权益状态</td>
          <td>权益逻辑删</td>
          <td>操作</td>
        </tr>
        <tr v-for="itme in dataInfo.list" :key="itme.Id">
          <td>{{ itme.Id }}</td>
          <td>{{ itme.Name }}</td>
          <td>
            {{ moment(itme.CreatTime).format("yyyy年MM月DD日 HH:mm:ss") }}
          </td>
          <td>{{ itme.UpTime }}</td>
          <td>{{ itme.State == 1 ? "开启" : "禁用" }}</td>
          <td>{{ itme.IsDeleted == false ? "未删除" : "已删除" }}</td>
          <td>
            <input
              type="button"
              value="删除"
              @click=""
              class="btn btn-primary"
            />
            <input
              type="button"
              value="修改"
              @click=""
              class="btn btn-primary"
            />
            <input
              type="button"
              v-if="itme.State == 0 "
              value="启用"
              @click="UpState(itme.Id,itme.State)"
              class="btn btn-primary"
            />
            <input
              type="button"
              v-if="itme.State == 1 "
              value="禁用"
              @click="UpState(itme.Id,itme.State)"
              class="btn btn-primary"
            />
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <span>总条数:{{ dataInfo.totalConut }}</span>
      <span>总页数:{{ dataInfo.topage }}</span>
      <span>总当页:{{ Qdata.index }}/{{ dataInfo.topage }}</span>
      <input type="button" value="首页" @click="pageto('a')" />
      <input type="button" value="上一页" @click="pageto('b')" />
      <input type="button" value="下一页" @click="pageto('c')" />
      <input type="button" value="尾页" @click="pageto('d')" />
      <input type="number" v-model="page" />
      <input type="button" value="跳转" @click="pageto(page)" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import axios from "axios";
import { ref, reactive, onMounted } from "vue";
import moment from "moment";

//创建一个路由 作用:实现页面跳转和传参  (修改查看详情都需要传Id)
const router = useRouter();

//跳转变量参数
let page = ref(1);

//获取数据
let dataInfo: any = reactive({
  list: [],
  totalConut: 0,
  topage: 0,
});

//传过去对象
let Qdata: any = reactive({
  name: "",
  CTime: "",
  ETime: "",
  index: 1,
  size: 6,
});

//
onMounted(() => {
  GetRightList();
});

//修改状态 根据Id修改状态
const UpState = (id: any, state: any) => {
  //判断第一步把状态改好
  if (state == 1) {
    state = 0;
  } else {
    state = 1;
  }
  //第二步
  console.log(state);
  axios({
    url:'https://localhost:7142/api/Member/UpdateRightstate',
    method:'PUT',
    params:{
      id:id,
      state:state
    }
  })
  .then(res=>{
    console.log(res);
    if(res.data == 1){
      alert("修改成功");
      GetRightList();
    }else{
      alert("修改失败");
      return;
    }
  })
  .catch(arr=>{
    console.log(arr);
  })
};

//分页条转
const pageto = (str: any) => {
  if (str == "a") {
    alert("跳转首页");
    Qdata.index = 1;
  } else if (str == "b") {
    if (Qdata.index <= 1) {
      alert("这是第一页");
      return;
    }
    Qdata.index--;
  } else if (str == "c") {
    if (Qdata.index >= dataInfo.topage) {
      alert("这是最后一页");
      return;
    }
    Qdata.index++;
  } else if (str == "d") {
    alert("跳转尾页");
    Qdata.index = dataInfo.topage;
  } else {
    //1.非空 2.限制数字大小判断
    if (str == "") {
      alert("不可为空");
      return;
    }
    if (str > 0 && str <= Qdata.index) {
      Qdata.index = str;
    } else {
      alert("页码小于0或大于总页数");
      return;
    }
  }
  GetRightList();
  page.value = Qdata.index;
};

//跳转到添加页面
const Add = () => {
  router.push("/qyiAdd");
};
//获取权益列表数据
const GetRightList = () => {
  axios({
    url: "/api/Member/RightList",
    method: "GET",
    params: Qdata,
  })
    .then((res) => {
      // alert("获取成功");
      dataInfo.list = res.data.list;
      dataInfo.topage = res.data.topage;
      dataInfo.totalConut = res.data.totalConut;
    })
    .catch((arr) => {
      alert("获取失败");
    });
};
</script>

<style scoped>
span {
  margin-right: 13px;
}
</style>
